<template>
  <div class="content">
    <div class="container">
      <!--    <div class="item playing">-->
      <!--      <img src="https://picsum.photos/200/300?random=1" alt="">-->
      <!--    </div>-->
    </div>
    <div class="indicator">
      刚刚看过
    </div>
  </div>
</template>
<script setup>
import {nextTick} from "vue";
import {debounce, getIndexRange, getPage} from "@/utils/utils";
import {getVideos,getOffset} from "@/api/video";

nextTick(() => {
  const SIZE = 12;
  const container = document.querySelector('.container')
  const indicator = document.querySelector('.indicator')
  const visibleIndex = new Set();
  const ob = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      const index = +entry.target.dataset.index
      if (entry.isIntersecting) {
        visibleIndex.add(index)
      } else {
        visibleIndex.delete(index)
      }
    }
    loadPageDebounce()
  })

  //获取下表
  function getRange() {
    if (visibleIndex.size === 0) {
      return [0, 0]
    }
    const min = Math.min(...visibleIndex)
    const max = Math.max(...visibleIndex)
    return [min, max]
  }

  function createElements(page) {
    const childrenLen = container.children.length
    const count = page * SIZE - childrenLen
    for (let i = 0; i < count; i++) {
      const item = document.createElement('div')
      item.className = 'item'
      item.dataset.index = i + childrenLen
      container.appendChild(item)
      ob.observe(item)
    }
  }

  function loadPages() {
    //得到当前能看到的元素索引范围
    const [minIndex, maxIndex] = getRange()
    const pages = new Set()
    for (let i = minIndex; i <= maxIndex; i++) {
      pages.add(getPage(i, SIZE));
    }
    for (const page of pages) {
      const [minIndex, maxIndex] = getIndexRange(page, SIZE)
      if (container.children[minIndex].dataset.loaded) {  //控制只加载一次
        continue;
      }
      container.children[minIndex].dataset.loaded = true
      getVideos(page, SIZE).then(res => {
        for (let i = minIndex; i <= maxIndex; i++) {
          const item = container.children[i]
          item.innerHTML = `<img src="${res[i - minIndex].clover}" />`
        }
      })
    }
  }
  const loadPageDebounce = debounce(loadPages,300)
  createElements(1)
  loadPages()
  async function setIndicatorVisible() {
    const offset = await getOffset(200)
    const [minIndex,maxIndex] = getRange()
    const page = getPage(offset,SIZE)
    if(offset >= minIndex && offset <= maxIndex){
      indicator.style.display = 'none'
    }else{
      indicator.style.display = 'block'
    }
    indicator.dataset.page = page
    indicator.dataset.index = offset
  }
  setIndicatorVisible()
  indicator.onclick = ()=>{
    const page = +indicator.dataset.page
    const index = +indicator.dataset.index
    createElements(page)
    container.children[index].scrollIntoView({
      behavior:'smooth',
      block:'center'
    })
  }
})
</script>
<style lang="scss">
.content {
  background: #000;
  width: 100vw;
  min-height: 100vh;
}

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;

  .item {
    width: 200px;
    height: 300px;
    border: 1px solid #fff;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-top: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .playing::after {
    content: "播放中";
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    height: 300px;
    line-height: 300px;
    width: 200px;
    color: #fff;
  }

}

.indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  background: #fff;
  border: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  display: none;
}
</style>